<template>
	<div class="home">
		<div class="nav-box">
			<div class="nav" @click="linkTo('listLoad')">
				<span>滚动加载自由容器</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('listLoadCustom')">
				<span>滚动加载底部容器</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('lottery')">
				<span>转盘抽奖</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('rem')">
				<span>rem适配</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('scratchable')">
				<span>刮刮乐</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('video')">
				<span>视频</span>
				<van-icon name="arrow" />
			</div>
			<div class="nav" @click="linkTo('html2Image')">
				<span>html转图片</span>
				<van-icon name="arrow" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Home',
	methods: {
		linkTo(href) {
			this.$router.push({ path: href });
		},
	},
};
</script>

<style lang="scss" scoped>
.nav-box {
	padding: 20px 20px 0;

	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 12px;
		margin-bottom: 12px;
		color: #323233;
		font-weight: 600;
		font-size: 14px;
		line-height: 40px;
		background: #f7f8fa;
		border-radius: 99px;

		&:hover {
			background: #eef0f4;
		}
	}
}
</style>
